<template>
  <div class="RedLiht">
    <div class="sun">
      <!-- 画25根光芒 -->
      <div
        class="ray"
        v-for="i in 24"
        :key="i"
        :class="colorNameObj[value]"></div>
      <div class="whiteBox"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      // currentRedLiht 红光状态 0关(灰色)1开(红色)2闪烁(500ms间闪)
      colorNameObj: {
        0: "gray",
        1: "red",
        2: "flash",
      },
    };
  },
  onLoad(val) {
    this.imei = val.imei;
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.RedLiht {
  width: 90rpx;
  height: 90rpx;
  margin: 0 60rpx;
  position: relative;
  .sun {
    width: 80rpx;
    height: 80rpx;
    position: relative;
    margin-top: -20rpx;
    margin-left: 40rpx;
  }

  .ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5px; /* 光芒的宽度 */
    height: 10px; /* 默认光芒的长度 */
    transform-origin: 50% 100%; /* 旋转中心为底部中心 */
  }
  .ray.red {
    background-color: red; /* 太阳的颜色 */
  }
  .ray.gray {
    background-color: #656565; /* 太阳的颜色 */
  }
  .ray.flash {
    background-color: red; /* 太阳的颜色 */
    animation: blink 0.5s infinite;
  }
  @keyframes blink {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }
  .ray:nth-child(1) {
    transform: rotate(15deg) scaleY(1.6);
  }
  .ray:nth-child(2) {
    transform: rotate(30deg) scaleY(1.3);
  }
  .ray:nth-child(3) {
    transform: rotate(45deg) scaleY(1.6);
  }
  .ray:nth-child(4) {
    transform: rotate(60deg) scaleY(1.3);
  }
  .ray:nth-child(5) {
    transform: rotate(75deg) scaleY(1.6);
  }
  .ray:nth-child(6) {
    transform: rotate(90deg) scaleY(1.3);
  }
  .ray:nth-child(7) {
    transform: rotate(105deg) scaleY(1.6);
  }
  .ray:nth-child(8) {
    transform: rotate(120deg) scaleY(1.3);
  }
  .ray:nth-child(9) {
    transform: rotate(135deg) scaleY(1.6);
  }
  .ray:nth-child(10) {
    transform: rotate(150deg) scaleY(1.3);
  }
  .ray:nth-child(11) {
    transform: rotate(165deg) scaleY(1.6);
  }
  .ray:nth-child(12) {
    transform: rotate(180deg) scaleY(1.3);
  }
  .ray:nth-child(13) {
    transform: rotate(195deg) scaleY(1.6);
  }
  .ray:nth-child(14) {
    transform: rotate(210deg) scaleY(1.3);
  }
  .ray:nth-child(15) {
    transform: rotate(225deg) scaleY(1.6);
  }
  .ray:nth-child(16) {
    transform: rotate(240deg) scaleY(1.3);
  }
  .ray:nth-child(17) {
    transform: rotate(255deg) scaleY(1.6);
  }
  .ray:nth-child(18) {
    transform: rotate(270deg) scaleY(1.3);
  }
  .ray:nth-child(19) {
    transform: rotate(285deg) scaleY(1.6);
  }
  .ray:nth-child(20) {
    transform: rotate(300deg) scaleY(1.3);
  }
  .ray:nth-child(21) {
    transform: rotate(315deg) scaleY(1.6);
  }
  .ray:nth-child(22) {
    transform: rotate(330deg) scaleY(1.3);
  }
  .ray:nth-child(23) {
    transform: rotate(345deg) scaleY(1.6);
  }
  .ray:nth-child(24) {
    transform: rotate(360deg) scaleY(1.3);
  }
  .ray:nth-child(25) {
    transform: rotate(375deg) scaleY(1.6);
  }
  .whiteBox {
    width: 15rpx;
    height: 15rpx;
    border-radius: 50%;
    border: 4rpx solid #000000;
    position: absolute;
    left: 31rpx;
    top: 49rpx;
  }
}
</style>
